<template>
	<view>
		<u-navbar :border-bottom="false" title-color="#FFFFFF" back-icon-color="#FFF"
			:is-fixed="isFixed" :is-back="isBack" 
			:background="background" 
			:back-text-style="{color: '#FFF'}" :title="title" 
			:back-icon-name="backIconName" :back-text="backText"
		>
			<view class="slot-wrap" v-if="useSlot">
				<view class="navbar-right">
					<view class="message-box right-item" @click="AddBtn">
						<u-icon name="plus" color="#ffffff" size="38"></u-icon>
					</view>
				</view>
			</view>
		</u-navbar>
		
		<view class="content">
			<view v-for="(item, index) in carList" :key="index">
				<view class="car-item" v-if="item.status>-1" @tap="changeCarItem(item)">
					<view class="car-item-text">{{ item.carcode }}</view>
					<view class="car-item-btn" @tap.stop="removeCar(item)">
						<u-icon name="close" color="#fa3534" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<view class="footer-btn">
			<u-button v-if="asPort" type="warning" @click="checkCar">审核({{carsSelectLength}})</u-button>
			<u-button v-if="asLogis" type="success" @click="submitCar">提交({{carsSelectLength}})</u-button>
		</view>
		
		<!-- <u-popup v-model="modalShow" mode="center" border-radius="14" width="500rpx" height="150px" :mask-close-able="false" :closeable="true">
			<view class="add-car-modal">
				<view class="car-text" @tap="showPlateNum"></view>
				<u-button @click="addCar">添加</u-button>
			</view>
		</u-popup> -->
		
		<plate-number ref="plate" v-model="plateNum" @showOrHide="showOrHide"></plate-number>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import plateNumber from '@/components/plate-number/plateNumber.vue'
	import {mapState } from 'vuex'
	
	export default {
		data() {
			return {
				title: '安排车辆',
				backText: null,
				backIconName: 'nav-back',
				useSlot: true,
				background: {
					backgroundColor: '#2979ff',
				},
				isBack: true,
				custom: true,
				isFixed: true,
				modalShow: false,
				activeCarItem: '',
				plateNum: '',
				carList: [],
				renwuid: '',
				taskid: '',
				station: '',
				typeName: '机械派工绑定车辆2'
			}
		},
		computed: {
			...mapState(['roleArr']),
			carsSelectLength () {
				return this.carList.filter(item => {
					return item.status == 1
				}).length
			},
			asPort () { // 是否未港方
				return this.roleArr.indexOf('港口') > -1
			},
			asLogis () { // 是否未物流
				return this.roleArr.indexOf('物流公司') > -1
			}
		},
		watch: {
			plateNum (nval, oval) {
				if (this.activeCarItem && nval) {
					this.activeCarItem.carcode = nval
				}
			}
		},
		components: {
			plateNumber
		},
		methods: {
			removeCar (item) {
				item.status = -1
				this.$refs.plate.close()
			},
			AddBtn () {
				// this.modalShow = true
				this.$refs.plate.close()
				this.carList.push({
					carcode: '',
					renwuid: this.renwuid,
					status: 0, // 未审核数据
					station: this.station,
					taskid: this.taskid
				})
			},
			addCar () {
				this.modalShow = false
			},
			showOrHide (flag) {
				if (!flag) {
					this.plateNum = ''
					this.activeCarItem = ''
				}
			},
			showPlateNum () {
				this.$refs.plate.show()
			},
			changeCarItem (item) {
				this.activeCarItem = item
				this.palteNum = item.carcode
				console.log(this.palteNum)
				this.$refs.plate.show()
			},
			submitCar () {
				let carListJosn = JSON.stringify(this.carList)
				console.log(carListJosn)
				this.$http.request(this.$httpApi.htgPortUrl.saveTaskToCar, carListJosn)
				.then(res => {
					if (res.code == 200) {
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
					this.$refs.uToast.show({
						title: res.message,
						type: 'success'
					})
				})
			},
			checkCar () {
				let needCheck = this.carList.some(item => {
					return item.status == 0 && item.id
				})
				if (!needCheck) {
					this.$refs.uToast.show({
						title: "已审核",
						type: 'success'
					})
					return
				}
				let carListJosn = JSON.stringify(this.carList)
				console.log(carListJosn)
				this.$http.request(this.$httpApi.htgPortUrl.checkTaskToCar, carListJosn)
				.then(res => {
					if (res.code == 200) {
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
					this.$refs.uToast.show({
						title: res.message,
						type: 'success'
					})
				})
			},
			getCars (dayworkorderplanid, typeName) {
				this.$http.request(this.$httpApi.htgPortUrl.getfromdwpmachines, {
					dayworkorderplanid: this.renwuid,
					type: this.typeName
				})
				.then(res => {
					this.carList = this.carList.concat(res.rows)
				})
			}
		},
		onLoad (options) {
			this.renwuid = options['renwuid']
			this.taskid = options['taskid']
			this.station = options['station']
			let type = '机械派工绑定车辆'
			this.getCars()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}
	.u-demo {
		//height: 200vh;
		height: calc(100% - 44px);
		height: calc(100% - 44px - constant(safe-area-inset-top));
		height: calc(100% - 44px - env(safe-area-inset-top));
	}
	
	.wrap {
		padding: 24rpx;
	}
	
	.navbar-right {
		margin-right: 24rpx;
		display: flex;
		margin-left: auto;
	}
	
	.search-wrap {
		margin: 0 20rpx;
		flex: 1;
	}
	
	.right-item {
		margin: 0 12rpx;
		position: relative;
		color: #ffffff;
		display: flex;
	}
	
	.message-box {
		
	}
	
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.map-wrap {
		display: flex;
		align-items: center;
		padding: 4px 6px;
		color: #fff;
		font-size: 30rpx;
		border-radius: 100rpx;
		margin-left: 30rpx;
	}
	
	.map-wrap-text {
		padding: 0 6rpx;
	}
	
	.content {
		padding: 40upx 20upx 160upx;
	}
	
	.car-item {
		display: flex;
		align-items: center;
		padding: 20upx;
		background-color: #ffffff;
		margin-bottom: 20upx;
		.car-item-text {
			min-width: 0;
			flex: 1;
			text-align: center;
		}
		.car-line {
			width: 30upx;
			text-align: center;
		}
		.car-item-btn {
			width: 50upx;
			text-align: center;
		}
	}
	
	.add-car-modal {
		background-color: #ffffff;
		padding: 80upx 10upx 20upx;
		.car-text {
			border: 1px solid #5e5e5e;
			margin-bottom: 20upx;
			height: 80upx;
		}
	}
	
	.footer-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
</style>
